<!--
 * @FilePath: DormitRate.vue
 * @Author: jack
 * @Date: 2025-03-26 08:27:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-04-08 09:27:35
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="content-box">
        <!-- 加载层 -->
        <div class="loading-flex-box" v-show="loading">
            <dv-loading>加载中...</dv-loading>
        </div>
        <!-- 头部 -->
        <Header ref="header"></Header>
        <!-- 中间内容部分 -->
        <div class="screenBoxTwo" ref="screenBoxHeight" :style="'height:' + screenBoxHeight + 'px;'">
            <div class="screenBoxTwoTop" ref="screenTopRef">
                <div class="leftBox">
                    <Title title='宿舍预警统计' ref="titleRef"></Title>
                    <div class="slideFlex">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(items, indexs) in swiperListNew" :key="indexs">
                                    <el-row :gutter="$util.nowSize(26)">
                                        <el-col v-for="(item, index) in items" :key="index" :span="8">
                                            <div class="slideItem">
                                                <div class="lfItem"
                                                    :style="Number(item.type) == 1 ? 'background: #FA5C60;' : Number(item.type) == 2 ? 'background:#04D7E3;' : Number(item.type) == 3 ? 'background:#FA5C60;' : Number(item.type) == 4 ? 'background:#FF4F27;' : 'background:#04D7E3;'">
                                                    {{ item.type_name }}
                                                </div>
                                                <div class="rtItem">
                                                    <div>{{ item.student_name }}</div>
                                                    <div>{{ item.room_name }}</div>
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rightBox">
                    <Title title='个人评分排名' ref="titleRef"></Title>
                    <div class="rankBox">
                        <div class="itemFlex two" v-if="rankList.length > 1">
                            <img src="../assets/img/2.png" />
                            <div>{{ rankList[1].total }}分</div>
                            <div>{{ rankList[1].student_name }}</div>
                            <div>{{ rankList[1].classname }}</div>
                        </div>
                        <div class="itemFlex one" v-if="rankList.length > 0">
                            <img src="../assets/img/1.png" />
                            <div>{{ rankList[0].total }}分</div>
                            <div>{{ rankList[0].student_name }}</div>
                            <div>{{ rankList[0].classname }}</div>
                        </div>
                        <div class="itemFlex third" v-if="rankList.length > 2">
                            <img src="../assets/img/3.png" />
                            <div>{{ rankList[2].total }}分</div>
                            <div>{{ rankList[2].student_name }}</div>
                            <div>{{ rankList[2].classname }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="screenBoxTwoBot" :style="'height:' + screenBottomHeight + 'px;'">
                <div class="leftBox">
                    <Title title='学生评分列表' ref="titleRef"></Title>
                    <DormitRateList :floorScore="floorScore" :floorScoreHeight="floorScoreHeight"
                        :nodateFloorScoreHeight="nodateFloorScoreHeight" :floorScoreBol="floorScoreBol"
                        @setFloorScoreBol="setFloorScoreBol">
                    </DormitRateList>
                </div>
                <div class="rightBox">
                    <Title title='宿舍评分统计' ref="titleRef"></Title>
                    <DormitRateScore :dormitScore="dormitScore" :dormitScore2="dormitScore2" :mode="mode"
                        :dormitScoreHeight="dormitScoreHeight" :max2="max2" :max="max">
                    </DormitRateScore>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <Footer ref="footer"></Footer>
    </div>
</template>
<script>
import Header from './Common/Header.vue'
import Footer from './Common/Footer.vue'
import Title from './Common/Title.vue'
import $util from '../util/util'
import DormitRateList from './DormitRateList.vue'
import DormitRateScore from './DormitRateScore.vue'
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
export default {
    name: 'DormitRate',
    components: {
        Header,
        Footer,
        Title,
        DormitRateList,
        DormitRateScore
    },
    data() {
        return {
            screenBoxHeight: 0,
            screenBottomHeight: 0,
            floorScoreHeight: 0,
            nodateFloorScoreHeight: 0,
            // 左上角
            swiperList: [],
            swiperListNew: [],
            // 左下角
            floorScoreBol: false,
            floorScore: [],
            floorTime: null,
            // 右下角
            dormitScoreHeight: 0,
            dormitScore: [],
            dormitScore2: [],
            loading: false,
            type: '',
            max: 0,
            max2: 0,
            mode: this.$route.query.mode, // mode=1 以宿舍为单位扣分 不传或者其他就是学生个人累计评分
            rankList: []
        }
    },
    async mounted() {
        this.loading = true
        await this.getHeight()
        await this.getLine()
        await this.getsSwiperInnit()
        await this.getRangking()
        await this.getfloorScore() // 楼栋扣分列表
        await this.getRankList()
        this.loading = false
        window.addEventListener('resize', () => {
            setTimeout(async () => {
                await this.getHeight()
            }, 100)
        })
    },
    methods: {
        setFloorScoreBol(bol) {
            this.floorScoreBol = bol
        },
        // 计算某个的高度
        async getHeight() {
            this.screenBoxHeight = document.body.clientHeight - this.$refs.header.$el.clientHeight - this.$refs.footer.$el.clientHeight
            this.screenBottomHeight = this.screenBoxHeight - this.$refs.screenTopRef.clientHeight
            this.floorScoreHeight = this.screenBottomHeight - this.$refs.titleRef.$el.clientHeight - 20
            this.nodateFloorScoreHeight = this.screenBottomHeight - this.$refs.titleRef.$el.clientHeight
            // 排行高度
            this.dormitScoreHeight = this.screenBottomHeight - this.$refs.titleRef.$el.clientHeight
        },
        // 左上角的数据
        async getsSwiperInnit() {
            this.mySwiper = new Swiper('.swiper-container', {
                // Swiper配置参数，例如：自动播放，分页器等
                loop: true, // 循环模式选项
                slidesPerView: 1,
                spaceBetween: $util.nowSize(40),
                autoplay: {
                    delay: 3000, // 轮播间隔时间设置为3000毫秒（即3秒）
                    disableOnInteraction: false, // 这将允许在用户交互后继续自动播放
                },
                observer: true,  //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,  //修改swiper的父元素时，自动初始化swiper
                on: {
                    // slideChange: () => { this.updateData() }, // 监听slideChange事件来更新数据
                },
            })
        },
        // 获取左侧轮播数据
        async getLine() {
            const params = {
                type: 'yujing',
                floor: window.localStorage.getItem('floorName')
            }
            const { data: res } = await this.$http.get('/Dormitory/DataScreen/', {
                params: params
            })
            if (res.code !== 1) return this.$message.error(res.msg)
            this.swiperListNew = this.groupArray([], res.data, 6)
        },
        // 将数组分为几组
        // 分组方法三个参数分别是 新数组，原数组，几个分为一组
        groupArray(newArr, arr, num) {
            if (arr.length > 0) {
                if (arr.length > num) { //arr 的长度大于 分组数
                    newArr.push(arr.splice(0, num)) //分组
                    this.groupArray(newArr, arr, num) //递归
                } else {
                    //如果长度不够分为一组，就直接把剩余的分为一组
                    newArr.push(arr.splice(0, arr.length))
                }
            }
            return newArr //返回已分组的新数组
        },
        // 右上角的排名
        async getRangking() {
            const params = {
                type: 'person_well',
                floor: window.localStorage.getItem('floorName')
            }
            const { data: res } = await this.$http.get('/Dormitory/DataScreen/', {
                params: params
            })
            if (res.code !== 1) return this.$message.error(res.msg)
            this.rankList = res.data
        },
        // 左下角的数据
        async getfloorScore() {
            const params = {
                type: 'person_score_sort',
                floor_name: window.localStorage.getItem('floorName'),
                faculty_name: Number(JSON.parse(window.localStorage.getItem('routerParams')).type) == 1 ? '初中部' : '高中部'
            }
            await this.$http({
                url: '/Dormitory/DataScreen/',
                method: 'get',
                params: params,
            }).then((res) => {
                if (res.data.code !== 1) {
                    this.islodingFive = true
                    return;
                }
                this.$nextTick(async () => {
                    let arr = []
                    if (res.data.data.length > 0) {
                        res.data.data.forEach(async (item, index) => {
                            arr.push([
                                // index+1,
                                item.student_name,
                                item.class_name,
                                item.room_name,
                                item.rule_name,
                                '<span style=' + (Number(item.item_type) === 1 ? "'color:#FF4F27;font-weight: bold;'" : "'color: #66FFFF;font-weight: bold;'") + '>' + (Number(item.item_type) === 1 ? item.score : '+' + item.score) + '分</span>'
                            ])
                        })
                    }
                    this.floorScore = arr
                    this.islodingFive = true
                })
            }).catch((err) => {
                console.log(err)
            })
        },
        // 右下角数据
        // 获取宿舍排行版
        async getRankList() {
            const params = {
                type: 'room_score_sort',
                floor_name: window.localStorage.getItem('floorName'),
                faculty_name: Number(JSON.parse(window.localStorage.getItem('routerParams')).type) == 1 ? '初中部' : '高中部'
            }
            if (Number(JSON.parse(window.localStorage.getItem('routerParams')).mode) === 1) {
                params.flag = 'room'
            }
            await this.$http({
                url: '/Dormitory/DataScreen/',
                method: 'get',
                params: params
            }).then(async (res) => {
                if (res.data.code !== 1) {
                    return false
                }
                this.dormitScore = res.data.data.kf
                if (this.dormitScore.length > 0) {
                    this.dormitScore.forEach((item, index) => {
                        item.rankNum = index + 1
                    })
                    this.max = await this.getMax(this.dormitScore)
                }
                this.dormitScore2 = res.data.data.jf
                if (this.dormitScore2.length > 0) {
                    this.dormitScore2.forEach((item, index) => {
                        item.rankNum = index + 1
                    })
                    this.max2 = await this.getMax(this.dormitScore2)
                }
                this.islodingSix = true
            }).catch((err) => {
                console.log(err)
            })
        },
        // 获取评分的分数最大值
        async getMax(data) {
            var barArry = []
            data.forEach((item, index) => {
                barArry.push(Math.abs(Number(Number(this.mode) == 1 ? item.room_score : item.score)))
            })
            return Math.max.apply(null, barArry)
        },
    }
}
</script>
<style lang="less" scoped>
.screenBoxTwo {
    padding: 0 40px;
    color: #ffffff;
    position: relative;

    .screenBoxTwoTop {
        padding: 14px 0 20px 0;
        display: flex;
        align-items: center;
        height: 332px;

        .leftBox {
            width: 1074px;
            height: 100%;
            background: #00124B;
            box-shadow: inset 0px 0px 40px 1px #0053B0;
            border-radius: 10px 10px 10px 10px;
            padding: 0 38px 24px 38px;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;

            .slideFlex {
                width: 100%;
                margin-top: 15px;

                .slideItem {
                    display: flex;
                    align-items: center;
                    background: #04216E;
                    border-radius: 4px;
                    border: 1px solid #004DBB;
                    margin-top: 24px;
                    padding: 14px;
                    height: 92px;
                    box-sizing: border-box;

                    .lfItem {
                        width: 64px;
                        height: 64px;

                        border-radius: 4px;
                        margin-right: 20px;
                        font-weight: bold;
                        font-size: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .rtItem {
                        font-weight: bold;
                        font-size: 18px;

                        div:first-of-type {
                            margin-bottom: 10px;
                        }

                    }
                }
            }
        }

        .rightBox {
            flex: 1;
            height: 100%;
            background: #00124B;
            box-shadow: inset 0px 0px 40px 1px #0053B0;
            border-radius: 10px 10px 10px 10px;
            border: 2px solid #004DBB;
            margin-left: 24px;


            .rankBox {
                display: flex;
                align-items: flex-end;
                justify-content: center;
                text-align: center;
                margin-top: 80px;

                .itemFlex {
                    width: 200px;
                    height: 167px;
                    border-radius: 10px 10px 10px 10px;
                    background: linear-gradient(180deg, #E3AC79 0%, rgba(0, 28, 90, 0) 100%);
                    margin: 0 12px;
                    position: relative;
                    font-weight: bold;
                    font-size: 16px;

                    img {
                        width: 80px;
                        display: block;
                        position: absolute;
                        top: -40px;
                        left: 50%;
                        margin-left: -40px;
                        text-align: center;
                    }

                    div {
                        margin-top: 12px;
                    }

                    div:first-of-type {
                        font-weight: bold;
                        font-size: 24px;
                        margin-top: 50px;
                    }
                }

                .itemFlex.two {
                    background: linear-gradient(180deg, #ACB6BE 0%, rgba(0, 28, 90, 0) 100%);
                }

                .itemFlex.one {
                    width: 200px;
                    height: 190px;
                    background: linear-gradient(180deg, #FCE278 0%, rgba(0, 28, 90, 0) 100%);

                    div:first-of-type {
                        margin-top: 56px;
                    }
                }

                .itemFlex.third {
                    background: linear-gradient(180deg, #E3AC79 0%, rgba(0, 28, 90, 0) 100%);
                }
            }
        }
    }

    .screenBoxTwoBot {
        display: flex;

        .leftBox {

            width: 1074px;
            height: 100%;
            background: #00124B;
            box-shadow: inset 0px 0px 40px 1px #0053B0;
            border-radius: 10px 10px 10px 10px;

        }

        .rightBox {
            flex: 1;
            height: 100%;
            background: #00124B;
            box-shadow: inset 0px 0px 40px 1px #0053B0;
            border-radius: 10px;
            margin-left: 24px;
        }
    }
}
</style>
